<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .btn a {
            text-decoration: none;
            display: inline-block;
            width: 200px;
            line-height: 35px;
            background: pink;
            color: #000;
            text-align: center;
        }

        .btn a.on {
            background: #f00;
            color: #fff;
        }

        .box div {
            width: 900px;
            height: 300px;
            display: none;
        }

        .box div:nth-child(1) {
            background: #f00;
            display: block;
        }

        .box div:nth-child(2) {
            background: #fa0;
        }

        .box div:nth-child(3) {
            background: #faa;
        }

        .box div:nth-child(4) {
            background: #aaa;
        }
    </style>
</head>

<body>
    <div class="btn">
        <a href="" class="on">零食</a>
        <a href="">坚果</a>
        <a href="">酒水</a>
        <a href="">奶制品</a>
    </div>
    <div class="box">
        <div>.0.0.0.</div>
        <div>1.1.1.1</div>
        <div>.2.2.2.</div>
        <div>3.3.3.3</div>
    </div>
    <script src="jquery.js"></script>
    <script>
        //获取到所有的按钮，批量绑定事件
        $('.btn a').on('mouseover', function () {
            //去除所有按钮上面的样式on
            $('.btn a').removeClass('on');
            //给当前按钮添加样式on
            $(this).addClass('on');
            //隐藏所有的盒子
            $('.box div').css('display', 'none');
            //获取到按钮的下标
            var i = $(this).index();//index,获取按钮的下标
            //console.log(i);
            
            $('.box div').eq(i).css('display', 'block');//eq(),代表的是和按钮对应的盒子的下标
        });
    </script>
</body>

</html>